<template>
    <div class="content">
        <div class="login_in bgf radius10">
            <el-row>
                <!--左-->
                <el-col class="login_left flex flex-column justify-between" :span="7">
                    <div class="logo"></div>
                    <div class="bg"></div>
                    <div class="txt cf text-align-center fs16 fm">传感器后台管理系统</div>
                </el-col>
                <!--右-->
                <el-col class="login_right bgf" :span="17">
                    <div class="fm fs18 cm title text-align-right">用户登录</div>
                    <el-form ref="ruleFormRef" :model="ruleForm" label-width="120px" :rules="rules"
                        class="login-content" label-position="top" hide-required-asterisk>
                        <el-form-item label="账号" prop="username">
                            <el-input v-model="ruleForm.username" autocomplete="off">
                                <template #prefix>
                                    <svg-icon name="username"></svg-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="ruleForm.password" type="password" autocomplete="off">
                                <template #prefix>
                                    <svg-icon name="password"></svg-icon>
                                </template>
                            </el-input>
                        </el-form-item>
                        <el-form-item class="text-align-center c9 fs12" @click="modify">
                            <el-icon style="top:2px">
                                <Warning />
                            </el-icon>
                            <span style="padding-left:6px">修改密码</span>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleLogin" :loading="logLoading"
                                class="loginBtn bgm fs14">
                                立即登录
                            </el-button>
                        </el-form-item>
                    </el-form>

                    <div class="comp_name text-align-center">中国人民解放军第四八零六工厂军械修理厂</div>
                </el-col>
            </el-row>

            <el-dialog v-model="dialogFormVisible" title="修改密码" top="40vh" width="35%">
                <el-form :model="form">
                    <el-form-item label="旧密码" :label-width="formLabelWidth">
                        <el-input v-model="form.oldpsd" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="新密码" :label-width="formLabelWidth">
                        <el-input v-model="form.newpsdOne" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="确认新密码" :label-width="formLabelWidth">
                        <el-input v-model="form.newpsdTwo" autocomplete="off" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取消</el-button>
                        <el-button type="primary" @click="submit">确定</el-button>
                    </span>
                </template>
            </el-dialog>

        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { login } from "@/api";
import { ElMessage } from 'element-plus';
import { Warning } from '@element-plus/icons-vue'
// 添加loading
const logLoading = ref(false);

const dialogFormVisible = ref(false);
const formLabelWidth = '140px'
// 初始化store
const store = useStore();
//初始化route
const router = useRouter();

// form实例
const ruleFormRef = ref(null);

// 修改密码
const form = reactive({
    oldpsd: '',
    newpsdOne: '',
    newpsdTwo: '',
})
// 登录表单
const ruleForm = reactive({
    username: 'admin',
    password: 'admin',
})
const modify = async () => {
    dialogFormVisible.value = true;
};
// 修改密码
const submit = async () => {
    dialogFormVisible.value = false;
};
// 校验规则
const rules = reactive({
    username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
    password: [
        {
            required: true,
            message: "密码不能为空",
            trigger: "blur",
        },
    ]
});
// 登录事件
const handleLogin = async (formEl) => {
    logLoading.value = true;
    if (!formEl) return
    try {
        await ruleFormRef.value.validate();
        const data = await login(ruleForm);
        store.commit("login", data)
        ElMessage.success("登录成功");
        router.push("/deviceManagement");
    } catch (error) {
        // ElMessage.warning("账号密码错误");
    }
    

    setTimeout(() => {
        logLoading.value = false;
    }, 100);
};
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100vh;
    background: url('~@/assets/bg.jpeg') center center fixed no-repeat;
    background-size: cover;

    .login_in {
        width: 840px;
        height: 530px;
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        margin: auto;
        overflow: hidden;

        .el-row {
            height: 100%;

            .login_left {
                position: relative;
                background: linear-gradient(180deg, #4373ed 0%, #4ab0f7 100%);
                height: 100%;

                .logo {
                    margin-top: 30px;
                    height: 24px;
                    // background: url('~@/assets/logo1.png') center no-repeat;
                }

                .bg {
                    width: 500px;
                    height: 369.26px;
                    opacity: 0.1;
                    background: url('~@/assets/logo_new.png') no-repeat left center / cover;
                }

                .txt {
                    margin: 0 auto 30px;
                    border-bottom: 1px solid #fff;
                    height: 33px;
                    line-height: 33px;
                }
            }

            .login_right {
                padding: 30px 41px;
                box-sizing: border-box;
                height: 100%;

                .login-content {
                    width: 280px;
                    height: 306px;
                    margin: 62px auto 0;

                    .loginBtn {
                        width: 100%;
                        height: 36px;
                        margin-top: 55px;
                        box-shadow: 0px 2px 10px rgba(24, 144, 255, 0.495711);
                    }
                }

                .comp_name {
                    color: #878787;
                    font-size: 15px;
                    font-family: 'Noto Sans SC';
                    margin-top: 70px;
                }
            }
        }

    }

}
</style>
<style lang="scss" scoped>
.content {
    .el-form--label-top .el-form-item__label {
        padding: 0 0 0 10px;
    }

    .el-form-item {
        margin-bottom: 10px;
    }
    :deep(.el-form-item__content) {
        justify-content: end;
    }
}
</style>
